<template>
	<view class="sign-page">

		<view class="main-box">
			<image src="../../static/img/exam-item.png"></image>
			<span>{{paperList.name}}</span>
		</view>
		<view class="info">
			<view class="myData-box1">
				<h3 class="myData-title">正在报名</h3>
				<p class="j-data">已报名人数：{{paperList.userKaoshiCount}} 人</p>
				<p class="j-data">报名截止时间：{{paperList.baomingEndTime}}</p>
				<p class="j-data">考试时间：{{paperList.startTime}}</p>
			</view>
			<!-- <view class="exam-info">
				
				<view class="examinfo">					
					<view>
						<span class="baoming">正在报名</span><span class="num">已报名人数：{{paperList.userKaoshiCount}} 人</span>
					</view>
					<span class="stoptime">报名截止时间:&nbsp;&nbsp;{{paperList.baomingEndTime}}</span>
					<span class="examtime">考试时间:&nbsp;&nbsp;{{paperList.startTime}}</span>
				</view>
			</view> -->
			<view class="line"></view>
			<view class="examinee-info">
				<view class="kaosheng-icon">
					<image src="../../static/img/kaosheng-info.png"></image>
					<span class="kaosheng">考生信息</span>
				</view>

<!-- 				<view class="input-info">
					<view class="info1">
						<span>姓&nbsp;&nbsp;&nbsp;&nbsp;名</span><input disabled="disabled" v-model="name" />
					</view>
					<view class="info1">
						<span>身份证</span><input disabled="disabled" v-model="shenfenzheng" />
					</view>
					<view class="info1">
						<span>手机号</span><input v-model="phone" type="number"
							oninput="if(value.length>11)value=value.slice(0,11)" />
					</view>
				</view> -->
				<view class="myData-box">
					<view class="login-box">
						<view class="login-item">
							<span class="input-text">姓名</span>
							<input  class="login-input" type="text" disabled="disabled" placeholder-style="color:#888888;" placeholder="姓名" v-model="name">
						</view>
						<view class="login-item">
							<span class="input-text">身份证</span>
							<input  class="login-input" type="text" disabled="disabled" placeholder-style="color:#888888;" placeholder="身份证" v-model="shenfenzheng">
						</view>
						<view class="login-item">
							<span class="input-text">手机号</span>
							<input  class="login-input" oninput="if(value.length>11)value=value.slice(0,11)" type="number" placeholder-style="color:#888888;" placeholder="手机号" v-model="phone">
						</view>
					</view>
				</view>
			</view>

			<view class="submit" @click="save">
				<span>提交报名信息</span>
			</view>

		</view>
	</view>

</template>

<script>
	import Cookies from 'js-cookie'
	export default {
		components: {},
		data() {
			return {
				paperList: [],
				name: '',
				shenfenzheng: '',
				userData: [],
				phone: '',
				kaoshiId: '',
			}
		},
		onLoad(option) {
			if (uni.getStorageSync('userData')) {
				this.userData = JSON.parse(uni.getStorageSync('userData'))

				this.name = this.userData.nickName;
				this.shenfenzheng = this.userData.property1.idCard;
				this.phone = this.userData.mobile
				console.log(this.userData.property1.idCard)
			}
			this.kaoshiId = option.id;
			this.getData();
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			},
			goPage() {

			},
			goContent(item, url) {
				this.$router.push(url);
			},
			pageChange(index) {

			},
			getData() {
				let that = this;
				this.$http.post("/f/getPaperByKaoshi?id=" + that.kaoshiId)
					.then(function(response) {
						console.log(response, 9090)
						// that.start = true;
						let list = response.data;
						// if(list.length!=0){
						//     let starttime;
						//     let endtime;
						//     let nowtime = new Date().getTime();
						//     let start,end;
						//     list.forEach((item,i)=>{
						//       start= item.baomingStartTime;
						//       start = start.replace(/-/g,'/'); // 将-替换成/，因为下面这个构造函数只支持/分隔的日期字符串
						//       starttime = new Date(start).getTime()

						//       end = item.baomingEndTime;
						//       end = end.replace(/-/g,'/');
						//       endtime = new Date(end).getTime()

						//       if(starttime>nowtime){
						//         //报名未开始
						//         item.baoming = '1'
						//       }
						//       if(starttime<nowtime && nowtime<endtime){
						//         //报名开始
						//         item.baoming = '2'
						//       }
						//       if(endtime<nowtime){
						//         //报名结束
						//          item.baoming = '3'
						//       }
						//     })
						// }
						console.log('hha ')
						console.log(list)
						that.paperList = list;
					})
					.catch(function(error) {
						// handle error
						console.log(error);
					})
			},
			save() {
				let that = this;
				if (this.phone == "") {
					// Notification.warning({
					// 	title: '提示',
					// 	message: "请输入手机号"
					// });
					uni.showToast({
						title:"请输入手机号" ,
						icon:"none"
					})
					return;
				} else if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
					// Notification.warning({
					// 	title: '提示',
					// 	message: "请输入正确的手机号"
					// });
					uni.showToast({
						title:"请输入正确的手机号" ,
						icon:"none"
					})
					return;
				}
				let url = "/f/saveUserKaoshiJoin"
				this.$http.post(url + "?kaoshiId=" + this.kaoshiId + "&mobile=" + this.phone)
					.then(function(response) {
						uni.showModal({
							title: '提示',
							content: '您已成功报名，届时请到电脑端参加考试！',
							showCancel:false,
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url:"kaoshibaoming"
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					})
					.catch(function(error) {
						console.log(error);
					})
			}
		}
	}
</script>

<style lang="less">
	.sign-page {
		width: 100%;
		height: 100%;
		// background-color: #f4f4f4;
		background-color: rgba(239, 250, 255, 100);

		.main-box {
			width: 100%;
			// height: 83rpx;
			// line-height: 50rpx;
			font-size: 24px;
			text-align: center;
			color: #399ee4;
			// padding-top: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			image {
				margin-top: 10rpx;
				// margin-left: 28rpx;
				width: 71rpx;
				height: 83rpx;
			}
			span{
				height:80px;
				line-height: 80px;
			}
		}

		.info {
			// margin-top: 60rpx;
			// margin-left: calc(50% - 297rpx);
			width: 100%;
			// height: 535rpx;
			line-height: 23rpx;
			// background-color: rgba(239, 250, 255, 100);
			text-align: center;
			border: 1rpx solid rgba(255, 255, 255, 100);

		.myData-box1{
			width:100%;
			padding:0 35rpx;
			margin-top:40rpx; 
			box-sizing:border-box;
			.introduce{
				line-height:40rpx;
				width:100%;
				box-sizing:border-box;
				padding-left:30rpx;
				font-size:30rpx;
				color:#666666;
			}
			.j-data{
				line-height:60rpx;
				width:100%;
				box-sizing:border-box;
				padding-left:30rpx;
				font-size:30rpx;
				color:#666666;
				display:inline-block;
				span{
					line-height:40rpx;
					height:40rpx;
					float:left;

				}
				.noimg{
					width:360rpx;
					height:220rpx;
					margin-right:15rpx;
						margin-top:10rpx;
					border:1px dashed #ccc;
					background:#000;
					border-radius:10rpx;
					
					text-align:center;
				}
				img{
						max-width:360rpx;
						max-height:220rpx;
						display:inline-block;
						
					}
				.img-box{
					width:100%;
					display:inline-block;

					
				}
			}
			.myData-title{
				line-height:40rpx;
				font-size:22px;
				color:#ff0000;
				font-weight:500;
				margin-bottom:20rpx;
			}
			.Interest{
				display:flex;
				justify-content:space-between;
				flex-wrap:wrap;
				width:100%;
				box-sizing:border-box;
				padding-left:30rpx;
				.Interest-item{
					width:200rpx;
					height:60rpx;
					line-height:60rpx;
					text-align:center;
					border-radius:30rpx;
					font-size:28rpx;
					color:#ffffff;
					background:#0079fe;
					margin-bottom:20rpx;
				}
			}
		}
			.exam-info {
				width: 100%;
				display: flex;
				
				.examinfo {
					width: 100%;
					margin-left: 100rpx;
					display: -webkit-box;
					display: -webkit-flex;
					display: flex;
					-webkit-box-orient: vertical;
					-webkit-box-direction: normal;
					-webkit-flex-direction: column;
					flex-direction: column;
					-webkit-justify-content: space-around;
					justify-content: space-around;
					-webkit-box-align: start;
					-webkit-align-items: flex-start;
					align-items: flex-start;
					font-size: 24rpx;
					.name {
						cursor: pointer;
						width: 400rpx;
						display: inline-block;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						margin-top: 17rpx;
						height: 28rpx;
						color: rgba(16, 16, 16, 100);
						font-size: 35rpx;
						text-align: left;
						font-family: PingFangSC-regular;
					}

					view {
						margin-top: 17rpx;
						width: calc(100% - 171rpx);
						display: flex;
						justify-content: space-between;

						.baoming {
							height: 22rpx;
							color: rgba(242, 45, 45, 100);
							font-size: 16px;
							text-align: left;
							font-family: PingFangSC-regular;
						}

						.num {
							height: 20rpx;
							color: rgba(157, 155, 155, 100);
							font-size: 16px;
							text-align: left;
							font-family: PingFangSC-regular;
						}
					}

					.stoptime {
						margin-top: 40rpx;
						height: 22rpx;
						color: rgba(57, 158, 228, 100);
						font-size: 16px;
						text-align: left;
						font-family: PingFangSC-regular;
					}

					.examtime {
						margin-top: 28rpx;
						height: 22rpx;
						color: rgba(57, 158, 228, 100);
						font-size: 16px;
						text-align: left;
						font-family: PingFangSC-regular;
					}
				}

			}

			.line {
				margin-left: 34rpx;
				margin-right: 33rpx;
				margin-top: 47rpx;
				// width: 100%;
				// height: 1rpx;
				border: 1rpx solid rgba(187, 187, 187, 100);
			}

			.examinee-info {
				width: 100%;
				.myData-box{
					width:100%;
					padding:0 50rpx;
					// margin-top:40rpx; 
					box-sizing:border-box;
					.myData-title{
						line-height:40rpx;
						font-size:32rpx;
						color:#666666;
						font-weight:500;
						margin-bottom:30rpx;
					}
					.textarea-main{
						width:100%;
						box-sizing:border-box;
						margin:0 auto;
						height:360rpx;
						border:1px solid #f0f0f0;
						border-radius:10rpx;
						overflow:hidden;
						background:#ffffff;
						position:relative;
						.yi-text{
							line-height:40rpx;
							position:absolute;
							bottom:20rpx;
							right:20rpx;
							font-size:26rpx;
							color:#999999;
				
						}
						.textarea-input{
							width:100%;
							height:100%;
							padding:30rpx;
							box-sizing:border-box;
							font-size:28rpx;
							padding-bottom:60rpx;
							color:#666666;
							line-height:40rpx;
						}
					}
					.login-box{
						width:100%;
						box-sizing:border-box;
						margin:0 auto;
						
						border:1px solid #f0f0f0;
						border-radius:10rpx;
						overflow:hidden;
						
						.login-item{
							width:100%;
							height:100rpx;
							border-bottom:1px solid #f0f0f0;
							display:flex;
							align-items:center;
							background:#ffffff;
							.login-input{
								width:calc(100% - 150rpx);
								height:100rpx;
								font-size:28rpx;
								color:#666666;
								box-sizing:border-box;
								padding-left:40rpx;
								line-height:100rpx;
							}
							.login-input1{
								width:calc(100% - 210rpx);
							}
							.iconyouEdit{
								width:60rpx;
								height:100rpx;
								line-height:100rpx;
								text-align:left;
								font-size:32rpx;
								color:#888888 !important;
							}
							.input-text{
								width:180rpx;
								height:100rpx;
								display:block;
								box-sizing:border-box;
								padding-left:30rpx;
								line-height:100rpx;
								text-align:center;
								font-size:28upx;
								color:#666666;
							}
						}
						.login-item:last-child{
							border:0;
						}
					}
					.Interest-box{
						padding:0 15rpx;
						padding-top:30rpx;
						padding-bottom:10rpx;
						background:#ffffff;
						display:flex;
						justify-content:space-between;
						flex-wrap:wrap;
						.Interest-item{
							width:200rpx;
							height:60rpx;
							box-sizing:border-box;
							margin-bottom:20rpx;
							border-radius:30rpx;
							border:1px solid #f0f0f0;
							line-height:56rpx;
							text-align:center;
							color:#888888;
							font-size:28rpx;
						}
						.isActive{
							border:0;
							line-height:60rpx;
							background:#0079fe;
							color:#ffffff;
						}
					}
				}
				.kaosheng-icon {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					height: 80px;
					image {
						width: 71rpx;
						height: 80rpx;
						margin-top: 20rpx;
					}
					.kaosheng {
						line-height: 80px;
						text-align: center;
						color: #399ee4;
						font-size: 24px;
						text-align: left;
						font-family: PingFangSC-regular;
					}
				}

				.input-info {
					// margin-top: 27rpx;
					// height: 240rpx;
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.info1 {
						display: flex;
						justify-content: space-around;
						margin-top: 11rpx;

						span {
							color: rgba(57, 158, 228, 100);
							font-size: 16rpx;
							text-align: left;
							font-family: SourceHanSansSC-bold;
							font-weight: bold;
							line-height: 60rpx;
						}

						input {
							width: 550rpx;
							height: 60rpx;
							color: rgba(136, 136, 136, 100);
							font-size: 14rpx;
							text-align: left;
							font-family: Microsoft Yahei;
							border: 1rpx solid rgba(187, 187, 187, 100);
						}
					}

				}

			}

			.submit {
				cursor: pointer;
				margin-top: 100rpx;
				margin-bottom: 30rpx;
				margin-left: calc(50% - 120rpx);
				width: 240rpx;
				height: 60rpx;
				border-radius: 4rpx;
				background-color: rgba(57, 158, 228, 100);
				text-align: center;
				line-height: 60rpx;
				border: 1rpx solid rgba(187, 187, 187, 100);
				border-radius: 5px;
				span {
					width: 108rpx;
					height: 27rpx;
					color: rgba(253, 253, 255, 100);
					font-size: 16px;
					text-align: left;
					font-family: SourceHanSansSC-bold;
				}
			}
		}
	}
</style>
